@import '@/styles/variables.scss';
// 排行榜
.ranking-wrap {
    // padding: 15px 15px 0 15px;
    padding-top: 15px;
    .ranking-title {
        margin-bottom: 8px;
        color: $--color-text-sub;
        font-size: $--font-size-14;
        padding: 0 15px;
    }
    .ranking-list {
        display: flex;
        flex-flow: column nowrap;
        padding: 10px 0;

        .ranking-item {
            display: flex;
            flex-flow: row nowrap;
            border-bottom: 1px solid $--color-border-normal;
            padding: 10px 15px;
            .ranking-title {
                padding: 0;
            }
            .content {
                flex: 1;
                display: flex;
                flex-flow: row nowrap;
            }
            &.is-link:hover {
                background-color: rgba(0, 0, 0, 0.08);
                cursor: pointer;
            }
            &.is-link:active {
                background-color: rgba(0, 0, 0, 0.1);
                cursor: pointer;
            }
            .ranking-left {
                flex: 3;
                /* 解决 text-overflow不生效问题 https://www.cnblogs.com/hinong/p/5626774.html */
                min-width: 0;
                .ranking-title {
                    overflow: hidden;
                    word-break: keep-all;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    font-size: $--font-size-14;
                    color: $--color-text-normal;
                }
                .ranking-datetime {
                    font-size: $--font-size-12;
                    color: $--color-text-sub;
                }
            }
            .ranking-right {
                flex: 2;
                text-align: right;
                font-size: $--font-size-16;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                i {
                    font-size: $--font-size-12;
                }
            }
        }
        .ranking-item.button {
            text-align: center;
            ::v-deep {
                .el-button {
                    line-height: 1em;
                }
            }
        }
    }
}
